import React from 'react';
import "../static/css/community.scss";
import ImageLazy from './commons/ImageLazy';

const com_img1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_img1.jpg');
const arr_right = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/arr_right.png');

import Swiper from 'swiper'

const index_banner_swiper1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper1.jpg');

let community_swiper;
export default React.createClass({
  componentDidMount:function(){
    $('.community_swiper').each(function(index){
      $(this).find('.pagination').addClass('pagination'+index);
      let aclass='community_swiper'+index;
      community_swiper = new Swiper(this,{
        pagination: '.pagination'+index,
        paginationClickable: true,
        calculateHeight:true,
      })
    })
    console.log(0);
    $('.community .more').each(function(){
      let statu = $(this).statu = false;
      let h = $(this).parent('.item').find('.txt').height();
      $(this).click(function(){
        statu = !statu;
        console.log(statu);
        let my_em =$(this).find('em');
        let this_txt = $(this).parent('.item').find('.txt');
        let this_h = this_txt.find('.wrapper').height();
        if(statu){
          my_em.html('&#9650;')
          $(this).parent('.item').find('.txt').height(this_h)
        }else{
          my_em.html('&#9660;')
          $(this).parent('.item').find('.txt').height(h)
        }

      })
    })
  },
  componentDidUpdate:function(){
    // community_swiper.reInit();
  },
  render:function(){
    return(
      <div className="community">
        <header>
          <div className="banner">
            <ImageLazy src={com_img1} style={{height:"4.79rem"}} />
          </div>
          <nav>
            <div className="wrapper">
              <a href="javascript:void(0)">
                <ImageLazy src="https://dummyimage.com/223x223/b293a4/fff" />
              </a>
              <a href="javascript:void(0)">
                <ImageLazy src="https://dummyimage.com/223x223/b293a4/fff" />
              </a>
              <a href="javascript:void(0)">
                <ImageLazy src="https://dummyimage.com/223x223/b293a4/fff" />
              </a>
            </div>
          </nav>
        </header>
        <div className="content">
          <div className="item_wrapper">
            <div className="item">
              <h3 className="tit_sty1">最新活动<img src={arr_right} className="arr_right" /><br/>
              <small>New  Event</small></h3>
              <div className="img_show1">
                <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
              </div>
            </div>
            <div className="item">
              <h3 className="tit_sty1">美丽社<br/>
              <small>Beauty  Club</small></h3>
                <div className="community_swiper swiper-container">
                  <div className="swiper-wrapper">
                    <div className="swiper-slide">
                      <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
                    </div>
                  </div>
                  <div className="pagination"></div>
                </div>
              <div className="txt box">
                <div className="wrapper">
                <p>这里是美丽社介绍：此刻我位于中关村的钱景财富，办公桌那头是今天的访谈对象：占荣春。</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                </div>
              </div>
              <a href="javascript:void(0)" className="more">
                MORE <em>&#9660;</em>
              </a>
            </div>

            <div className="item">
              <h3 className="tit_sty1">名医社<br/>
              <small>Famous Doctor Club</small></h3>
                <div className="community_swiper swiper-container">
                  <div className="swiper-wrapper">
                    <div className="swiper-slide">
                      <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
                    </div>
                  </div>
                  <div className="pagination"></div>
                </div>
              <div className="txt box">
                <div className="wrapper">
                <p>这里是美丽社介绍：此刻我位于中关村的钱景财富，办公桌那头是今天的访谈对象：占荣春。</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                </div>
              </div>
              <a href="javascript:void(0)" className="more">
                MORE <em>&#9660;</em>
              </a>
            </div>

            <div className="item">
              <h3 className="tit_sty1">大咖社<br/>
              <small>Famous Doctor Club</small></h3>
                <div className="community_swiper swiper-container">
                  <div className="swiper-wrapper">
                    <div className="swiper-slide">
                      <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" />
                    </div>
                  </div>
                  <div className="pagination"></div>
                </div>
              <div className="txt box">
              <div className="wrapper">
                <p>这里是美丽社介绍：此刻我位于中关村的钱景财富，办公桌那头是今天的访谈对象：占荣春。</p>
                <p>他是对外经贸MBA，拥有21年金融理财从业经验，先后就职于中信建投证券，银河证劵，长城信托.</p>
                </div>
              </div>
              <a href="javascript:void(0)" className="more">
                MORE <em>&#9660;</em>
              </a>
            </div>
          </div>
        </div>
      </div>
    )
  }
})
